<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue+boostrap 实践2</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-family: 'LiSu';
            font-size: 16px !important;
        }
    </style>
    <script>
        window.onload = function () {
            var demo = new Vue({
                el: '#app',
                data: {
                    inp: "请输入",
                    status: false
                },
                methods: {
                    hide: function () {
                        this.status = false;
                    },
                    toggle: function () {
                        this.status = !this.status;
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="app">
        <div v-if="status" style="margin:10px; width:400px" class="input-group">
            <div class="input-group-addon">输入框</div>
            <input v-model="inp" type="text" class="form-control" placeholder="请输入内容">
        </div>
        <div style="margin-top: 15px;margin-left: 150px" class="btn btn-default" type="button">
            <div v-on:click="toggle()" class="glyphicon glyphicon-search">{{inp}}</div>
        </div>
    </div>

</body>

</html>